<template>
  <div class="courses">
    <v-list class="class_list">
        <v-data-table
          :headers="head"
          :items="items"
          :items-per-page="10"
          class="elevation-1"
          @click:row="toContain"
        >
          <template v-slot:item.actions="{ item }">
            <v-icon
              small
              class="mr-2"
              @click="handleEdit(item)"
            >
              mdi-pencil
            </v-icon>
            <v-icon
              small
              @click="deleteItem(item)"
            >
              mdi-delete
            </v-icon>
          </template>
          <template v-slot:no-data>
            <v-btn
              color="primary"
              @click="initialize"
            >
              Reset
            </v-btn>
          </template>
        </v-data-table>
    </v-list>

    <v-row justify="center">
      <v-dialog
        v-model="dialog"
        persistent
        max-width="600px"
      >
        <v-card>
          <v-card-title>
            <span class="text-h5">Edit Course</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col
                  cols="12"
                  sm="6"
                  md="4"
                >
                  <v-text-field
                    label="Legal first name*"
                    required
                  ></v-text-field>
                </v-col>
                <v-col
                  cols="12"
                  sm="6"
                  md="4"
                >
                  <v-text-field
                    label="Legal middle name"
                    hint="example of helper text only on focus"
                  ></v-text-field>
                </v-col>
                <v-col
                  cols="12"
                  sm="6"
                  md="4"
                >
                  <v-text-field
                    label="Legal last name*"
                    hint="example of persistent helper text"
                    persistent-hint
                    required
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    label="Email*"
                    required
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    label="Password*"
                    type="password"
                    required
                  ></v-text-field>
                </v-col>
                <v-col
                  cols="12"
                  sm="6"
                >
                  <v-select
                    :items="['0-17', '18-29', '30-54', '54+']"
                    label="Age*"
                    required
                  ></v-select>
                </v-col>
                <v-col
                  cols="12"
                  sm="6"
                >
                  <v-autocomplete
                    :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                    label="Interests"
                    multiple
                  ></v-autocomplete>
                </v-col>
              </v-row>
            </v-container>
            <small>*indicates required field</small>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="blue darken-1"
              text
              @click="dialog = false"
            >
              Close
            </v-btn>
            <v-btn
              color="blue darken-1"
              text
              @click="dialog = false"
            >
              Save
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>


  </div>
</template>
<script>
export default {
  data: () => ({
    head:[
      { text:'id',
        align:'start',
        sortable:false,
        value:'id',
      },
      { text: 'Title', value: 'title' },
      { text: 'Teacher', value:'teacher'},
      { text: 'Credits', value: 'credit' },
      { text: 'Hours', value: 'hours' },
      { text: 'Actions', value: 'actions', sortable: false }
    ],
    items: [
      {
        "id": 1,
        "uid": 1,
        "title": "Algorithms and Data Structures",
        "hours": 48,
        "credit": 3,
        "description": "A data structure is a way of storing and organizing data in a computer. Data structure is a set of data elements which have certain logical relation, apply some storage structure in computer, and encapsulate corresponding operation. It contains three aspects: logical relation, storage relation and operation."
      },
      {
        "id": 2,
        "uid": 1,
        "title": "Software Engineering",
        "hours": 32,
        "credit": 2,
        "description": "Software engineering is the study and application of how to develop and maintain software in a systematic, standardized, quantitative and procedural way, as well as how to combine the time-tested and correct management techniques with the best technology methods currently available. It involves programming language, database, software development tools, system platform, standards, design patterns and so on."
      },
      {
        "id": 3,
        "uid": 1,
        "title": "Data Bases",
        "hours": 32,
        "credit": 2,
        "description": "A database is \"a warehouse that organizes, stores, and manages data according to its data structure.\" It is an organized, shareable, uniformly managed collection of large amounts of data stored in a computer for a long time."
      },
      {
        "id": 4,
        "uid": 1,
        "title": "Web Development",
        "hours": 40,
        "credit": 2.5,
        "description": "Website development is to make some professional websites, such as dynamic web pages. ASP, PHP, JSP pages. And website development is generally original, website production can use someone else's template. Web development literally goes further than production. It is not just web art and content. It may involve domain name registration inquiries, the development of some of the functions of the site.\r\n"
      },
      {
        "id": 5,
        "uid": 1,
        "title": "Embedded systems",
        "hours": 32,
        "credit": 2,
        "description": "Embedded system consists of hardware and software. Is a device that can operate independently. Its software content only includes the software running environment and its operating system. Hardware includes signal processor, memory, communication module and so on."
      },
      {
        "id": 6,
        "uid": 1,
        "title": "Computer Architecture",
        "hours": 50,
        "credit": 4,
        "description": "Computer architecture is the general term of computer theory, basic working principle and theory, which is divided according to different attributes and functions. Among them, the theoretical part of the computer is not only linked with a certain actual hardware, such as the storage part includes registers, memory, hard disk and so on."
      },
      {
        "id": 7,
        "uid": 1,
        "title": "Computer Networks",
        "hours": 48,
        "credit": 3,
        "description": "Computer network refers to a computer system that connects a number of independent computers and their external devices with different geographical locations through communication lines. Under the management and coordination of network operating system, network management software and network communication protocol, resources sharing and information transfer can be realized."
      }
    ],
    dialog: false
  }),
  mounted() {
    this.getCourseList()
  },
  methods: {
    getCourseList() {
      
    },
    handleEdit() {
      this.dialog = true;
    }
  },
};
</script>
<style scoped>
.courses {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.class_list{
background-color: #F5F5F5;
width: 100%;
padding-top: 8vh;
padding-left: 2vw;
padding-right: 2vw;
}
.classes{
  border: 1px solid #E0E0E0;
  padding-left: 2vw ;
  margin-right: 15vw;
}
</style>
